<template>
  <div class="kaoqin">
    <nav-bar title="考勤记录" />
    <div>
      <div class="search">
        <div class="search-left">
          <div class="search-left-title">日期:</div>
          <div class="search-left-start">
            <input type="text" v-model="startTime" placeholder="2021-12-01" />
          </div>
          <div class="search-left-line"></div>
          <div class="search-left-end"><input type="text" v-model="endTime" placeholder="2021-12-01" /></div>
        </div>
        <div class="search-right">
          <button class="searchbtn" @click="searchList">查询</button>
          <button class="resetbtn" @click="reset">重置</button>
        </div>
      </div>
    </div>
    <div>
      <div class="main-container-bottom-table">
        <van-row class="table-header">
          <van-col :span="7" align="center">日期</van-col>
          <van-col :span="7" align="center">上班打卡时间</van-col>
          <van-col :span="6" align="center">下班打卡时间</van-col>
          <van-col :span="4" align="center">状态</van-col>
        </van-row>
        <van-row class="table-body-item" v-for="(item, index) in tableData" :key="index">
          <van-col :span="7" align="center">
            <p>{{ item.signUpOnwork | riqiFilter }}</p>
          </van-col>
          <van-col :span="7" align="center">
            <p>{{ item.signUpOnwork | timeFilter }}</p>
          </van-col>
          <van-col :span="6" align="center">
            <p>{{ item.signUpOutwork | timeFilter }}</p>
          </van-col>
          <van-col :span="4" align="center">
            <p>{{ item.isLateName }},{{ item.isLeaveEarlierName }}</p>
          </van-col>
        </van-row>
        <!-- <van-pagination
          v-model="formParams.pageNumber"
          :total-items="formParams.totalSize"
          :items-per-page="formParams.pageSize"
          @change="pageChange"
        >
          <template #prev-text>
            <van-icon name="arrow-left" />
          </template>
          <template #next-text>
            <van-icon name="arrow" />
          </template>
          <template #page="{ text }">{{ text }}</template>
        </van-pagination> -->
      </div>
    </div>
  </div>
</template>
<script>
import Attendance from '@/api/attendance.js'
export default {
  data() {
    return {
      startTime: '',
      endTime: '',
      formParams: {
        gridCode: '',
        gridName: '',
        pointName: '',
        startTime: '',
        endTime: '',
        inspectionResult: '',
        inspectionResultCompany: '',
        inspectionResultCompanyName: '',
        pageNumber: 1,
        recordSize: 0,
        pageSize: 10,
        totalSize: 0
      },
      tableData: []
    }
  },
  filters: {
    riqiFilter(value) {
      return value.substr(0, 10)
    },
    timeFilter(value) {
      if (value) {
        return value.substr(11, 20)
      } else {
        return '-'
      }
    }
  },
  mounted() {
    const params = {
      startTime: '',
      endTime: ''
    }
    this.getList(params)
  },
  beforeDestroy() {},
  methods: {
    // 重置
    reset(params) {
      params.startTime = ''
      params.endTime = ''
      this.startTime = ''
      this.endTime = ''
      this.getList(params)
    },
    // 搜索
    searchList(params) {
      params.startTime = this.startTime
      params.endTime = this.endTime
      this.getList(params)
    },
    // 获取列表
    getList(params) {
      this.$toast.loading({
        message: '加载中...',
        forbidClick: true
      })
      Attendance.Api.getList(params).then(res => {
        //   tableData
        const { data, status } = res
        if (status === 200) {
          this.tableData = data.data
          this.$toast.clear()
          //   console.log(this.tableData, '数据')
        }
      })
    }
  }
}
</script>
<style lang="less" scoped>
@import './style/index.less';
</style>
